/*
 * @Author: bclz
 * @Date: 2022-02-08 12:56:50
 * @LastEditTime: 2022-02-19 15:46:48
 * @LastEditors: bclz
 * @Description: no description
 */

import { Props } from './type';
import styles from './index.less';
import { AlertOutlined, DisconnectOutlined, ToolOutlined } from '@ant-design/icons';
import { Card, Menu, Dropdown, Button, Space } from 'antd';
import Airopen from './img/Airopen.png';
import { useState } from 'react';
import { DeviceDetailsModal } from '../deviceDetails';

const cardTitle = (connectType) => {
  return (
    <div className={styles.cardHeader}>
      <div className={styles.connectInfo}>
        {connectType === 0 ? (
          <span style={{ color: 'green' }}>
            <DisconnectOutlined /> 在线
          </span>
        ) : (
          <span style={{ color: 'red' }}>
            <DisconnectOutlined /> 离线
          </span>
        )}
      </div>
    </div>
  );
};

const menu = (
  <Menu>
    <Menu.Item>
      <span>查看线路列表</span>
    </Menu.Item>
    <Menu.Item>
      <span>修改服务指向</span>
    </Menu.Item>
    <Menu.Item>
      <span>设备巡检记录</span>
    </Menu.Item>
    <Menu.Item>
      <span>设备参数调整</span>
    </Menu.Item>
    <Menu.Item>
      <span>内置定时配置</span>
    </Menu.Item>
  </Menu>
);

export default (props) => {
  const { data } = props;

  const [modalId, setModalId] = useState('');

  return (
    <div className={styles.cardBlock}>
      {data.map((item) => {
        const { connectType, status, id, image, uuid, equipmentId, info } = item;
        return (
          // <div  className={styles.devideCard}>
          <Card
            key={`${id}`}
            onClick={() => {
              alert('');
            }}
            className={styles.devideCard}
            title={cardTitle(connectType)}
          >
            <div className={styles.cardContent}>
              <div className={styles.imageBlock}>
                <img src={Airopen} alt={image} />
              </div>
              <div className={styles.infoBlock}>
                <p>{uuid}</p>
                <p>{equipmentId}</p>
                <p>{info}</p>
              </div>
            </div>
            <div className={styles.cardFooter}>
              {status === 0 ? (
                <span style={{ color: 'green' }}>
                  <AlertOutlined /> 正常
                </span>
              ) : (
                <span style={{ color: 'red' }}>
                  <AlertOutlined /> 异常
                </span>
              )}
              <div className={styles.actions}>
                <Dropdown overlay={menu} placement="bottomLeft">
                  <ToolOutlined />
                </Dropdown>
              </div>
            </div>
          </Card>
          // </div>
        );
      })}
      <DeviceDetailsModal
        devideId={modalId}
        setVisible={() => {
          setModalId('');
          console.log(modalId);
        }}
      ></DeviceDetailsModal>
    </div>
  );
};
